<!--
 * @Description: 导入产品BOM 弹窗
 * @Author: chenju
 * @Date: 2022-02-11 14:15:12
 * @LastEditors: chenju
 * @LastEditTime: 2022-03-03 15:24:42
-->
<template>
  <div>
    <BaseDialog
      v-model:visible="dialogVisible"
      title="上传完成"
      :width="640"
      append-to-body
      destroy-on-close
      :close-on-press-escape="false"
      :loading="loading"
      :before-close="handleClose"
      @confirm="handleConfirm"
      :showCancelButton="false"
    >
      <template #header>
        <div class="g-flex">
          <CIcon type="c-mian-tishi" class="g-mr4" style="color: #fead0a"></CIcon>
          <span style="color: #212529">上传完成</span>
        </div>
      </template>
      <el-form label-position="top" v-loading="loading">
        <el-form-item>
          <div class="g-flex-start-center">
            <span class="g-font-14n2 g-ml6"
              >成功导入{{ result.successNum }}条,导入失败{{ result.failNum }}条；
              <el-button
                @click="downLoad(result.failFileUrl)"
                link
                style="color: #51596c"
                v-if="result.failNum"
              >
                <span style="color: #03ac82">查看错误日志</span></el-button
              >
            </span>
          </div>
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed, ref, watch } from 'vue';
import { BaseDialog } from '@/components/BaseDialog/index';
import { useMessage } from '@/hooks/useMessage';
// import BomDialogUpload from './BomDialogUpload/index.vue';
import baseConfig from '@/config';
export default defineComponent({
  name: 'ImportFactorDialog',
  components: {
    BaseDialog
    // BomDialogUpload
  },
  props: {
    visible: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    modelNo: {
      type: String,
      default: ''
    },
    res: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  emits: ['update:visible', 'error', 'success'],
  setup(props, { emit }) {
    const { createConfirm, createMessage } = useMessage();
    // const { modelNo } = toRefs(props);
    const uploadRef = ref();
    const loading = ref(false);

    const dialogVisible = computed({
      get: () => {
        return props.visible;
      },
      set: (value: boolean) => {
        emit('update:visible', value);
      }
    });

    const result = computed({
      get: () => {
        return props.res;
      },
      set: val => {
        // emit('update:visible', val);
        console.log(111111);
      }
    });

    const handleClose = (done: () => void) => {
      if (uploadRef.value && uploadRef.value.handleSubmit) {
        if (uploadRef.value.tempFileList && uploadRef.value.tempFileList.length) {
          createConfirm('提示', '离开后不会保存选择的内容，是否确定？', {
            iconType: 'warning'
          }).then(() => {
            done();
          });
        } else {
          done();
        }
      } else {
        done();
      }
    };

    const handleConfirm = () => {
      dialogVisible.value = false;
      // if (uploadRef.value && uploadRef.value.handleSubmit) {
      //   if (uploadRef.value.tempFileList && uploadRef.value.tempFileList.length) {
      //     loading.value = true;
      //     uploadRef.value.handleSubmit();
      //   } else {
      //     createMessage.error('请先上传文件！');
      //   }
      // } else {
      //   createMessage.error('提交异常！');
      // }
    };

    const handleUploadError = (url?: string) => {
      console.log('handleUploadError');
      loading.value = false;
      if (url) {
        dialogVisible.value = false;
        emit('error', url || '');
      }
    };

    const handleUploadSuccess = () => {
      console.log('handleUploadSuccess');
      loading.value = false;
      handleSubmmitSuccess();
      emit('success');
    };

    const handleSubmmitSuccess = () => {
      createMessage.success('提交成功！');
      dialogVisible.value = false;
      // emit('refresh');
    };

    // 下载模板文件
    function handleDownload() {
      window.open(baseConfig.MODEL_BOM_TEMPLATE_FILE_URL + `?t=${new Date().getTime()}`);
    }

    function downLoad(url: string) {
      window.location.href = url;
    }

    return {
      uploadRef,
      // modelNo,
      loading,
      dialogVisible,
      handleClose,
      handleConfirm,
      handleUploadError,
      handleUploadSuccess,
      handleDownload,
      result,
      downLoad
    };
  }
});
</script>
<style lang="scss" scoped>
.import-bom-alert {
  padding: 0 12px;
  width: 100%;
  height: 48px;
  background: #f3f9f7;
}
</style>
